
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>搜索</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="dns-prefetch" href="https://wepay.weipinchu.com/" />
    <link href="//at.alicdn.com/t/font_fsk2otdio7ds4i.css" rel="stylesheet">
    <link rel="stylesheet" href="https://ommdq027l.qnssl.com/static/release/1500311086095/vendor.css" />
    <link rel="stylesheet" href="https://ommdq027l.qnssl.com/static/release/1500311086095/front.css" />
    <script src="https://ommdq027l.qnssl.com/static/release/1500311086095/vendor.js"></script>
    <script src="https://ommdq027l.qnssl.com/static/release/1500311086095/app.js"></script>
    <script>
      var fromChannelMp = false;
      if (fromChannelMp) {
        LocalCache.remove('profile');
      }
    </script>
    <script type="text/html" id="tmpl-thumb-novel-list">
      <div class="thumb-novel-list">
        {{#each novels}}
        <div class="novel-item">
          <div class="novel-image">
            <a href="/Home/Novel/novelinfo/id/{{id}}"><img src="{{avatar}}"/></a>
            {{#if is_time_limited_free}}
              <i class="iconfont icon-time-limited-free"></i>
            {{/if}}
          </div>
          <div class="novel-name">
            <a href="/Home/Novel/novelinfo/id/{{id}}">{{truncate title 6}}</a>
          </div>
        </div>
        {{/each}}
      </div>
    </script>
    <script>
      var HandlebarTemplates = {
        _cache: {},

        get: function (name) {
          if (!this._cache[name]) {
            this._cache[name] = Handlebars.compile($('#' + name).html());
          }

          return this._cache[name];
        }
      }
    </script>

    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d5e4918c33053db244a223b60906a4d3";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </head>
  <body class=" has-footer-nav">
    <include file="Public/menu"/>
    <div class="page-search">
  <div id="user-profile-bar" class="user-profile-bar" style="display:none;">
    <a href="/profile/index">
        <span class="headimg"></span>
        <span class="nickname" style="vertical-align:middle"></span>
        <span style="float:right;vertical-align: middle">个人中心</span>
    </a>
</div>

<script>
    $(function () {
        if (!isLoggedIn()) {
            return;
        }

        var token = getMemberToken();
        var profile = LocalCache.getObject('profile', { etag: token });
        if (profile) {
            renderProfile(profile);
        } else {
            $.get('/api/my/profile', function (result) {
                LocalCache.set('profile', result.data, { etag: token });
                renderProfile(result.data);
            });
        }

        function renderProfile(profile) {
            var $profile = $('#user-profile-bar');
            $profile.find('.nickname').html(profile.nickname || '匿名用户');
            $profile.find('.uid').html(profile.id);

            if (profile.headimgurl) {
                $profile.find('.headimg').html('<img style="width:24px;height:24px;vertical-align:middle;border-radius:18px" src="' + profile.headimgurl + '"/>');
            } else {
                $profile.find('.headimg').html('<i class="iconfont icon-head"></i>');
            }

            $profile.show();
        }
    });
</script>  
  <div class="weui_search_bar">
    <div class="weui_search_outer">
      <div class="weui_search_inner">
        <i class="weui_icon_search"></i>
        <input type="search" class="weui_search_input" placeholder="请输入书名" required/>
        <a href="javascript:" class="weui_icon_clear"></a>
      </div>
    </div>
    <a href="javascript:" class="btn-search">搜索</a>
  </div>
  
    <div class="hot-panel">
    <p>热门搜索:</p>

    <div class="block">
      <ul>
	      <foreach name="hot_search" item="vo">	
	      	<li class="hot"><a href="/Home/Novel/novelinfo/id/{$vo.id}">{$vo.name}</a></li>
	      </foreach>
      </ul>
    </div>
  </div>
    
  <div class="block block-novel-list">
    <h4 class="block-heading"><span class="total-of-results"></span></h4>
    <div class="block-body novel-list novels"></div>
    <p class="no-data">查无数据，换个条件试试看吧</p>
    <div class="weui-infinite-scroll">
      <div class="infinite-preloader"></div>
    </div>
  </div>

  <div class="block block-recommend-list">
    <h4 class="block-heading">精彩推荐</h4>
    <div class="block-body novel-list recommends">
      <foreach name="wonderful" item="vo">
		  <div class="novel-item">
		    <div class="novel-image">
		      <a href="/Home/Novel/novelinfo/id/{$vo.novel_id}">
		        <img src="{:C('FILE_HOST_PATH')}{$vo.img}" onerror="this.src='{:C('FILE_HOST_PATH')}/Public/home/other/img_error.jpg'">
		      </a>
		    </div>
		    <div class="novel-info">
		      <a href="/Home/Novel/novelinfo/id/{$vo.novel_id}" class="novel-title">{$vo.novel_name}</a>
		      <div class="novel-summary">
		        <a href="/Home/Novel/novelinfo/id/{$vo.novel_id}">{$vo.description}</a>
		      </div>
		    </div>
		  </div>
	  </foreach>
	</div>
  </div>
</div>

<script type="text/html" id="tmpl-search-novel-item">
  <div class="novel-item">
    <div class="novel-image">
      <a href="/Home/Novel/novelinfo/id/{{id}}">
        <img src="{{avatar}}">
      </a>
      {{#if is_time_limited_free}}
      <i class="iconfont icon-time-limited-free"></i>
      {{/if}}
    </div>
    <div class="novel-info">
      <a href="/Home/Novel/novelinfo/id/{{id}}" class="novel-title">{{title}}</a>
      {{#if is_time_limited_free}}
      <div class="novel-meta free-period">
        <i class="iconfont icon-clock"></i>
        <span>限时免费: {{free_start}} ~ {{free_end}}</span>
      </div>
      {{/if}}
      <div class="novel-summary">
        <a href="/Home/Novel/novelinfo/id/{{id}}">{{truncate summary 50}}</a>
      </div>
    </div>
  </div>
</script>

<script>
  function SearchPage () {}

  _.extend(SearchPage.prototype, {
    init: function () {
      var me = this;
      _.extend(me, {
        loading: false,
        keywords: '',
        pagination: {
          cursor: 0,
          total: 0,
          limit: 10
        },
        dom: {
          body: $('body'),
          page: $('.page-search'),
          input: $('.page-search').find('.weui_search_input'),
          hotpanel: $('.page-search').find('.hot-panel'),
          novels: $('.page-search').find('.novels'),
          blocknovellist: $('.page-search').find('.block-novel-list'),
          recommends: $('.page-search').find('.recommends'),
          blockrecommend: $('.page-search').find('.block-recommend-list'),
          infinitescroll: $('.page-search').find('.weui-infinite-scroll')
        }
      });

      me.dom.body.infinite(50).on('infinite', function () {
        me.scroll();
      });

      me.dom.page.find('.btn-search').on('click', function () {
        me.keywords = me.dom.input.val();
        me.search();
      });

      me.fetchRecommend();
    },
    scroll: function () {
      if (!this.loading && !this.isCompleted()) {
        this.fetch();
      }
    },
    reset: function () {
      _.extend(this, {
        pagination: {
          cursor: 0,
          total: 0,
          limit: 10
        }
      });
    },
    search: function () {
      this.reset();

      if (_.isEmpty(this.keywords)) {
        $.toast('请输入要搜索的内容!', 'text');
      } else {
        this.fetch();
      }
    },
    fetch: function () {
      var me = this;
      me.loading = true;

      return $.get('/Home/Novel/ajaxsearch/', {
        q: me.keywords,
        start: me.pagination.cursor,
        limit: me.pagination.limit
      })
      .always(function () {
        me.loading = false;
      })
      .then(function (payload) {
        me.render(payload);
      });
    },
    fetchRecommend: function () {
      var me = this;
      return $.get('/api/novel_lists/get/search_recommend_list')
        .then(function (payload) {
          me.renderRecommend(payload);
        });
    },
    render: function (payload) {
      this.dom.hotpanel[_.isEmpty(this.keywords) ? 'show' : 'hide']();
      this.dom.blocknovellist.find('.no-data')[payload.data.length === 0 ? 'show' : 'hide']();
      this.dom.blocknovellist.show();
      this.dom.blockrecommend[payload.data.length === 0 ? 'show' : 'hide']();

      this.dom.page.find('.total-of-results').text('搜索"' + this.keywords + '"共' + payload.total + '条结果'  );

      var html = _.map(payload.data, function (novel) {
        if (novel.is_time_limited_free) {
          _.extend(novel, {
            free_start: moment(novel.free_time_start * 1000).format('M月D日'),
            free_end: moment(novel.free_time_end * 1000).format('M月D日')
          });
        }

        return HandlebarTemplates.get('tmpl-search-novel-item')(novel);
      });
      
      this.dom.novels[this.pagination.cursor === 0 ? 'html' : 'append'](html.join(''));
      this.pagination.cursor += payload.data.length;
      this.pagination.total = payload.total;
      this.dom.infinitescroll[this.isCompleted() ? 'hide' : 'show']();
    },
    renderRecommend: function (payload) {
      var html = _.chain(payload.data).map(function (novel) {
        return HandlebarTemplates.get('tmpl-search-novel-item')(novel);
      }).value();

      this.dom.blockrecommend[payload.data && payload.data.length ? 'show' : 'hide']();
      this.dom.recommends.html(html.join(''));
    },
    isCompleted: function () {
      return this.pagination.total <= this.pagination.cursor;
    }
  });

  $(function () {
    'use strict';

    var page = new SearchPage();
    page.init();
  });
</script>



    </body>
</html>
